import { Tooltip, Col, Row, Spin } from 'antd';
import { FormattedMessage, connect, formatMessage } from 'umi';
import React, { Component } from 'react';
import styles from './index.less';


const MyTable = props => {
  const { dataRow = [], columns } = props;
  const nameAttr = ['同比', '环比']

  const ShowArrow = props => {
    const { name, value } = props.row
    if(nameAttr.includes(name) && value) {
      return (
        <span className={styles.arrow}>
          {value > 0 ? '↑' : '↓'}
        </span>
      )
    }
    return ''
  }

  // 判断是否是同比、环比，获得不同颜色
  const getRowColor = (name, value) => {
    if(nameAttr.includes(name) && value) {
      return value > 0 ? '#d89614' : '#49aa19'
    }
    return 'rgba(255,255,255,0.8)'
  }
  return (
    <div className={styles.visualTable}>
      <ul>
        <li>
          <span span></span>
          {columns.map((col, index) => {
            return <span key={index} style={{ width: col.width }}>{col.name}</span>
          })}
        </li>
        {dataRow.map((item, index) => {
          return (
            <li key={index}>
              <span>{index + 1}</span>
              {columns.map((col, index) => {
                let surfix = col.surfix
                let amount = item[col.dataIndex] || 0
                if (typeof col.surfix === 'function') {
                  surfix = col.surfix()
                }
                if (typeof col.render === 'function') {
                  const { value, unit } = col.render(amount || 0)
                  amount = value + unit
                }
                return (
                  <Tooltip title={amount} key={index}>
                    <p style={{ width: col.width, color: getRowColor(col.name, item[col.dataIndex]) }}>
                      {amount || '-'}
                      {amount ? surfix : ''}
                      <ShowArrow row={{name: col.name, value: item[col.dataIndex]}}></ShowArrow>
                    </p>
                  </Tooltip>
                )
              })}
            </li>
          )
        })}
      </ul>
    </div>
  );
}

export default connect(({ buildingMonitor }) => ({
  buildingMonitor,
}))(MyTable);
